<template>
  <Head title="" isBack>
    <template #content>
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="company-info">
        <div class="info-item">企业名称：{{ data.companyData.orgName }}</div>
        <div class="info-item">组织机构代码：{{ data.companyData.code }}</div>
      </div>
      <div class="edit-line"></div>
      <div class="line-card">
        <div class="right-card right-card2">
          <div class="dividend-title">
            <div class="card-title">充电业务</div>
          </div>
          <div class="charge-data">
            <div class="charge-data-item">
              <div class="charge-info">
                <div class="card-title">充电电量（度）</div>
                <div class="info">
                  {{
                    data.detailData.totalPower
                      ? formatNumber(data?.detailData?.totalPower)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">服 务 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data?.detailData?.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">电 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data?.detailData?.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="charge-data-item charge-data-item1">
              <div class="charge-info">
                <div class="card-title">订单金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data?.detailData?.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">优惠抵扣（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data?.detailData?.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">实收金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data?.detailData?.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="line-card">
        <div class="card-content-bottom">
          <div class="occupy-title">
            <div class="card-title">钱包余额（今日）</div>
          </div>
          <div class="money-content">
            <div class="charge-info">
              <div class="card-title">企业钱包（元）</div>
              <div class="info">
                {{
                  data.todayData.unitBalance
                    ? formatNumber(data?.todayData?.unitBalance)
                    : '--'
                }}
              </div>
            </div>
            <div class="charge-info">
              <div class="card-title">个人钱包（元）</div>
              <div class="info">
                {{
                  data.todayData.personalBalance
                    ? formatNumber(data?.todayData?.personalBalance)
                    : '--'
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="card-content-bottom">
          <div class="occupy-title">
            <div class="card-title">超时占用</div>
          </div>
          <div class="money-content">
            <div class="charge-info">
              <div class="card-title">订单计费（元）</div>
              <div class="info">
                {{
                  data.occupyData.sumTotalAmount
                    ? formatNumber(data.occupyData.sumTotalAmount)
                    : '--'
                }}
              </div>
            </div>
            <div class="charge-info">
              <div class="card-title">实收金额（元）</div>
              <div class="info">
                {{
                  data.occupyData.sumActualAmount
                    ? formatNumber(data.occupyData.sumActualAmount)
                    : '--'
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="card-content-bottom">
          <div class="occupy-title">
            <div class="card-title">互联互通对账</div>
          </div>
          <div class="money-content">
            <div class="charge-info">
              <div class="card-title">对账支付金额（元）</div>
              <div class="info">
                {{
                  data.detailData1.resultAmount
                    ? formatNumber(data.detailData1.resultAmount)
                    : '--'
                }}
              </div>
            </div>
            <div class="charge-info">
              <div class="card-title">平台计费（元）</div>
              <div class="info">
                {{
                  data.detailData1.amount
                    ? formatNumber(data.detailData1.amount)
                    : '--'
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="余额（实时）" name="balance">
          <Table
            ref="tableRef"
            v-show="data.activeTab === 'balance'"
            :columns="data.columns"
            :toolbar="data.toolbar"
            @get-list="getData"
          >
          </Table>
        </el-tab-pane>
        <el-tab-pane label="财务流水" name="flowing">
          <Table
            v-if="data.activeTab === 'flowing'"
            ref="tableFlowingnRef"
            :columns="flowingData.columns"
            :toolbar="flowingData.toolbar"
            @get-list="getFlowingData"
          ></Table
        ></el-tab-pane>
        <el-tab-pane label="充电订单" name="order">
          <Table
            v-if="data.activeTab === 'order'"
            ref="tableStationRef"
            :columns="orderData.columns"
            :toolbar="orderData.toolbar"
            @get-list="getOrderData"
          ></Table
        ></el-tab-pane>
        <el-tab-pane label="超时占用订单" name="occupy">
          <Table
            v-if="data.activeTab === 'occupy'"
            ref="tableOccupyRef"
            :columns="occupyData.columns"
            :toolbar="occupyData.toolbar"
            @get-list="getoccupyData"
          ></Table
        ></el-tab-pane>
        <el-tab-pane label="互联对账结果" name="interconnect">
          <Table
            v-if="data.activeTab === 'interconnect'"
            ref="tableInterconnectRef"
            :columns="interconnectData.columns"
            :toolbar="interconnectData.toolbar"
            @get-list="getInterconnectData"
          ></Table
        ></el-tab-pane>
      </el-tabs>
    </template>
  </Head>
</template>
      
<script lang="ts" setup name="financialDetail">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import {
  getUserTotalInfo,
  pagingUserTotalSeq,
  pagingShareRecord,
  getShareTotalInfo,
  getAccountBalance,
  pagingUserAccount,
  pagingAccountFlow,
  queryOrgConfig,
  pagingAllAccountFlow,
  EXPORT_USERACCOUNT,
  EXPORT_FINANCEFLOW,
  EXPORT_USERTOTALSEQ,
  pagingUserOccupy,
  EXPORT_USEROCCUPY,
  getCecTotalInfo,
  EXPORT_RECONCILIATION,
  reconciliationQueryPage,
  getOccupyUserTotalInfo,
} from '@/service/apis/financial';
import { queryDicByParent } from '@/service/apis/api';
import { formatNumber, exportFile } from '@/utils/utils';

const router = useRouter();
const route = useRoute();

const tableRef = ref();
const tableStationRef = ref();
const tableFlowingnRef = ref();
const tableOccupyRef = ref();
const tableInterconnectRef = ref();

const {
  query: { id, timeType, time, orgType },
} = route;

const data = reactive({
  isOne: true,
  activeProfitTab: '',
  dataList: [] as any,
  detailData: {} as any,
  detailData1: {} as any,
  occupyData: {} as any,
  todayData: {} as any,
  getInterconnectData: {} as any,
  companyData: {} as any,
  activeTab: 'balance',
  formData: {} as any,
  shareProfitId: '',
  type: 0,
  columns: [
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'accountName',
      label: '用户姓名',
    },
    {
      prop: 'unitBalance',
      label: '企业账户余额（元）',
    },
    {
      prop: 'personalBalance',
      label: '个人账户余额（元）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_USERACCOUNT, '余额(实时)', id);
      },
    },
  ],
});
const flowingData = reactive({
  columns: [
    {
      prop: 'type',
      label: '类型',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'accountName',
      label: '用户姓名',
    },
    {
      prop: 'amount',
      label: '产生额',
    },
    {
      prop: 'unitBalance',
      label: '企业账户余额',
    },
    {
      prop: 'personalBalance',
      label: '个人账户余额',
    },
    {
      prop: 'createTime',
      label: '时间',
    },
    {
      prop: 'remark',
      label: '备注',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_FINANCEFLOW, '流水记录', data.formData);
      },
    },
  ],
});
const orderData = reactive({
  columns: [
    {
      prop: 'startChargeSeq',
      label: '订单编号',
    },
    {
      prop: 'operatorName',
      label: '充电运营商',
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'totalPower',
      label: '充电电量',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费',
      dataType: String,
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费',
      dataType: String,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
      dataType: String,
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣',
      dataType: String,
    },
    {
      prop: 'actualAmount',
      label: '实付金额',
      dataType: String,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_USERTOTALSEQ,
          `充电订单列表(${data.companyData.orgName})`,
          data.formData
        );
      },
    },
  ],
});
const occupyData = reactive({
  columns: [
    {
      prop: 'orderId',
      label: '占用订单号',
      width: 260,
    },
    {
      prop: 'operatorName',
      label: '占用运营商',
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    // {
    //   prop: 'connectorName',
    //   label: '占用终端名称',
    // },
    {
      prop: 'connectorId',
      label: '占用终端编码',
    },
    // {
    //   prop: 'orgName',
    //   label: '用户归属企业',
    // },
    {
      prop: 'orgType',
      label: '是否实际扣费',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'durationHours',
      label: '占用时长',
    },
    {
      prop: 'oughtAmount',
      label: '订单计费',
    },
    {
      prop: 'amount',
      label: '占用收费',
      template: (row: any, index: number) => {
        if (row.amount) {
          return `${row.amount}元`;
        } else if (row.amount == 0) {
          return `${row.amount}元`;
        } else {
          return '--';
        }
      },
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_USEROCCUPY, '用户占用订单', data.formData);
      },
    },
  ],
});
const interconnectData = reactive({
  columns: [
    {
      prop: 'flowStartChargeSeq',
      label: '互联互通流水号',
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'connectorId',
      label: '终端编码',
    },
    {
      prop: 'startChargeSeq',
      label: '平台订单号',
    },
    {
      prop: 'resultPayTime',
      label: '订单支付时间',
    },
    {
      prop: 'resultAmount',
      label: '订单金额',
    },
    {
      prop: 'resultPowerAmount',
      label: '电费',
    },
    {
      prop: 'resultServiceAmount',
      label: '服务费',
    },
    {
      prop: 'diffAmount',
      label: '对账差额',
      askContent: '对账支付金额-平台计费',
    },
    {
      prop: 'type',
      label: '争议类型',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const formData = Object.assign(data.formData, { orgId: id });
        exportFile(
          EXPORT_RECONCILIATION,
          `互联互通列表（${data.companyData.orgName}）`,
          formData
        );
      },
    },
  ],
});

const handleClickTab = (e: any) => {
  console.log('name====', e.props.name);
  if (e.props.name === 'balance') {
    data.type = 0;
    tableRef.value?.handleQuery();
  } else if (e.props.name === 'flowing') {
    data.type = 1;
    tableFlowingnRef.value?.handleQuery();
  } else if (e.props.name === 'order') {
    data.type = 2;
    tableStationRef.value?.handleQuery();
  } else if (e.props.name === 'occupy') {
    data.type = 3;
    tableOccupyRef.value?.handleQuery();
  } else if (e.props.name === 'interconnect') {
    data.type = 4;
    tableInterconnectRef.value?.handleQuery();
  }
};

const getTab = (value: any) => {
  if (data.isOne) {
    value.time = time;
    value.timeType = timeType;
    data.isOne = false;
  }
  data.formData = Object.assign(data.formData, value);
  getUserInfo();
  getOccupyUserInfo();
  getCecTotalData();

  if (data.type === 0) {
    tableRef.value?.handleQuery();
  } else if (data.type === 1) {
    tableFlowingnRef.value?.handleQuery();
  } else if (data.type === 3) {
    tableOccupyRef.value?.handleQuery();
  } else if (data.type === 4) {
    tableInterconnectRef.value?.handleQuery();
  } else {
    tableStationRef.value?.handleQuery();
  }
};

const getData = (page: any, search: any) => {
  pagingUserAccount(id, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
const getFlowingData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    channelType: 0,
    orgId: id,
  });
  pagingAllAccountFlow(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getFlowingData(page, search);
        return;
      }
      nextTick(() => {
        tableFlowingnRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
  // pagingAccountFlow(data.formData, page).then((res: any) => {
  //   if (res) {
  //     nextTick(() => {
  //       tableFlowingnRef.value.setTable({
  //         total: res.totalCount,
  //         table: res.dataList,
  //       });
  //     });
  //   }
  // });
};
const getOrderData = (page: any, search: any) => {
  const formData = Object.assign(data.formData, {
    orgTotalId: id,
    chargeSeqGroup: '1',
  });
  pagingUserTotalSeq(formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
const getoccupyData = (page: any, search: any) => {
  const formData = Object.assign(data.formData, {
    orgTotalId: id,
    chargeSeqGroup: '1',
  });
  pagingUserOccupy(formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getoccupyData(page, search);
        return;
      }
      nextTick(() => {
        tableOccupyRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getUserInfo = () => {
  const formData = Object.assign(data.formData, {
    orgTotalId: id,
  });
  getUserTotalInfo(formData).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
};
getAccountBalance(id).then((res: any) => {
  console.log('res====', res);
  if (res) {
    data.todayData = res;
  } else {
    data.todayData = {};
  }
});

const getOccupyUserInfo = () => {
  const formData = Object.assign(data.formData, {
    orgTotalId: id,
  });
  getOccupyUserTotalInfo(formData).then((res: any) => {
    if (res) {
      data.occupyData = res;
    } else {
      data.occupyData = {};
    }
  });
};
const getInterconnectData = (page: any, search: any) => {
  const formData = Object.assign(data.formData, { orgId: id });
  reconciliationQueryPage(formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getInterconnectData(page, search);
        return;
      }
      nextTick(() => {
        tableInterconnectRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getCecTotalData = () => {
  const formData = Object.assign(data.formData, { orgId: id, orgType });
  getCecTotalInfo(formData).then((res: any) => {
    console.log(res);

    if (res) {
      data.detailData1 = res;
    } else {
      data.detailData1 = {};
    }
  });
};
// 字典
queryDicByParent({
  listDtos: ['accountFlowType', 'recStatus', 'orgType', 'chargeSourceEnum'],
}).then((res: any) => {
  if (res) {
    flowingData.columns[0].dic = [...res.accountFlowType];
    interconnectData.columns[9].dic = [...res.recStatus];
    occupyData.columns[4].dic = [...res.orgType];
    occupyData.columns[8].dic = [...res.chargeSourceEnum];
  }
});
queryOrgConfig({ id }).then((res: any) => {
  if (res) {
    data.companyData = res;
  }
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
@import './index.scss';

.card-content {
  width: 100%;
  .card-data {
    .card-item {
      display: flex;
      .title {
        margin-left: 12px;
      }
      .iconfont {
        font-size: 56px;
      }
    }
  }
}

.line-card {
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  .right-card2 {
    width: 100%;
  }
  .card-content-bottom {
    width: 32.5%;
    height: 129px;
    background: linear-gradient(165.39deg, #d4dbf5 -17.51%, #a4b9ff 89.89%);
    border-radius: 8px;
    padding: 10px 0;
    margin: 20px 0;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 149px;
      background-image: url(@/assets/images/financial-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.2;
    }

    .occupy-title {
      text-align: center;
      .title {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
        // margin-bottom: 10px;
      }
    }
    .money-content {
      display: flex;
      justify-content: space-around;
      margin-top: 28px;
      .charge-info {
        color: #262626;
        font-size: 12px;
        line-height: 20px;
        margin-top: 10px;
        text-align: center;
      }
    }
  }
}
</style>
  